/* global */

* {
    margin: 0;
    padding: 0;
}

.container {
    padding: 25px 50px;
    background: black;
    color: white;
}


/* --- object --- */

.obj {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block;
}

:root {
    --matrix-1: 1;
    --matrix-2: 0;
    --matrix-3: 0;
    --matrix-4: 1;
    --matrix-5: 0;
    --matrix-6: 0;
}


/* transform */

.base-3d {
    transform-style: preserve-3d;
    perspective: 100px;
    perspective-origin: 50% 50%;
    text-align: center;
}

.transform-1 {
    transform: matrix( var(--matrix-1), var(--matrix-2), var(--matrix-3), var(--matrix-4), var(--matrix-5), var(--matrix-6));
}

.transform-2 {
    transform-origin: 50% 50% 0;
    transform: rotateX(45deg);
}